<!-- index.html -->
<!doctype html>

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="pocketQuest">
<head>
	<!-- META -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

	<title>Pocket Quest Data Summary</title>

	<!-- SCROLLS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
	<style>
		html 					{ overflow-y:scroll; }
		body 					{ padding-top:50px; }
		#todo-list 				{ margin-bottom:30px; }
		.picture_header			{ height: 100%; width: 100%; padding-left: 100px; padding-right: 100px; padding-top: 10px; padding-bottom: 10px;}
		.data_div				{ width: 90%; padding-top:10px; padding-bottom:10px;}
		.meta_child				{ display: none;}
		.meta_data				{ cursor:pointer;}
	</style>

	<!-- SPELLS -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
	<script src="/javascripts/core.js"></script>

</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
	<div class="container">
		<!-- HEADER AND TODO COUNT -->
		<div class="jumbotron text-center">
			<img src="/images/icon_title2.png" alt="pocket_quest_title" class="picture_header">
			<h1>Current Adventurers => <span class="label label-info">{{ todos.length }}</span></h1>
		</div>

		<!-- TODO LIST -->
		<div id="todo-list" class="row" style="height:300px; margin-bottom:30px">
			<div class="data_div well" style="float: left;width:20%;height:100%;">

				<!-- LOOP OVER THE TODOS IN $scope.todos -->
				<h1 style="margin-left: auto; margin-right: auto;margin-bottom:50px">Users</h1>
				<div class="checkbox" ng-repeat="todo in todos | orderBy:'username':false">
					<div style="overflow:hidden">
						<div class="name_div" id="{{ todo.username }}" ng-click="meta_data.nameClick(todo.email,todo.meta,$event)">
							<p class="meta_data label label-info" style="overflow-x:auto">{{ todo.username }}</p>
						</div>
					</div>
				</div>
			</div>
			<div class="meta_child" style="float: left; margin-left:20px;width:70%;height:100%;">
				<div style="float: left; width:100%;height:25%;">
					<h1>Email</h1>
					<p class="meta_data" style="overflow-x:auto">{{ meta_email }}</p>
				</div>
				<div style="float: left; width:100%;">
					<h1>Meta</h1>
					<p class="meta_data" style="position:relative;width:100%;height:180px;word-wrap: break-word;overflow-y:auto;overflow-x:hidden;">{{ meta_meta }}</p>
					<!--<input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.meta }}-->
				</div>
			</div>
		</div>

		<!-- FORM TO CREATE TODOS -->
		<div id="todo-form" class="row" style="overflow:hidden; padding-bottom:20px">
			<div class="col-sm-8 col-sm-offset-2 text-center">
				<form>
					<div class="form-group">

						<!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
						<input style="float: left; width:40%" type="text" class="form-control input-lg text-center" placeholder="Username" ng-model="formData.name">
						<input style="float: left; width:40%; margin-left:10px" type="text" class="form-control input-lg text-center" placeholder="Email" ng-model="formData.email">
					</div>

					<!-- createToDo() WILL CREATE NEW TODOS -->
					<button type="submit" class="btn btn-primary btn-lg" ng-click="createUser()" style="float: left; margin-left:20px">Add</button>
				</form>
			</div>
		</div>

	</div>
</body>
</html>